<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"

      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="/template/templateAdminProducto.xhtml">
            <ui:define name="title">Listar</ui:define>
            <ui:define name="descripcionHeader">
                <i class="fa fa-cubes"/> Manager
                <small>Listar Carta de Productos</small>
            </ui:define>
            <ui:define name="breadcrumbHeader">

                <li class="active">Listar productos</li>

            </ui:define>
            <ui:define name="content">
                <h:form id="ProductoListForm">

                    <div class="row">

                        <div class="col-lg-12">

                            <div class="panel panel-default">
                                <div class="panel-heading" >
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="panel-title pull-left"><i class="fa fa-list"/> Lista de Productos</div>

                                        </div>
                                        <div class="col-lg-4">
                                            <div class="panel-title pull-right">
                                                <div class="btn-group">   
                                                    <p:commandLink   
                                                        id="viewButton"
                                                        styleClass="btn btn-primary btn-xs"
                                                        update=":ProductoViewForm"
                                                        disabled="#{empty productoController.selected}"
                                                        oncomplete="PF('ProductoViewDialog').show()">
                                                        <i class="fa fa-search"/>
                                                    </p:commandLink>


                                                    <p:commandLink style=""  
                                                                   id="editButton"
                                                                   styleClass="btn btn-warning btn-xs"
                                                                   update=":ProudctoEditForm"
                                                                   disabled="#{empty productoController.selected}"
                                                                   oncomplete="PF('ProductoEditDialog').show()">
                                                        <i class="fa fa-pencil-square-o"/>
                                                    </p:commandLink>


                                                    <p:commandLink style=""  
                                                                   id="deleteButton"
                                                                   styleClass="btn btn-danger btn-xs"
                                                                   update=":ProductoEditForm"
                                                                   disabled="#{empty productoController.selected}"
                                                                   oncomplete="PF('ProductoEditDialog').show()">
                                                        <i class="fa fa-trash-o"/>
                                                    </p:commandLink>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <p:dataTable id="datalist" value="#{productoController.items}" var="item"
                                             selectionMode="single" selection="#{productoController.selected}"
                                             emptyMessage="No se encontraron registros"
                                             paginator="true"
                                             widgetVar="tabla"
                                             rowKey="#{item.idProducto}"
                                             rows="5"
                                             rowsPerPageTemplate="5,10,15,20,25"
                                             paginatorPosition="bottom"
                                             liveResize="true"
                                             resizableColumns="true"
                                             filterEvent="keyup"

                                             >
                                    <p:ajax event="rowSelect"   update=" :ProductoListForm:viewButton :ProductoListForm:editButton :ProductoListForm:deleteButton"/>
                                    <p:ajax event="rowUnselect" update="   :ProductoListForm:viewButton :ProductoListForm:editButton :ProductoListForm:deleteButton"/>


                                    <p:column width="1%" filterBy="#{item.idProducto}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="ID"/>
                                        </f:facet>
                                        <h:outputText style="text-transform:capitalize" value="#{item.idProducto}"/>
                                    </p:column>

                                    <p:column width="2%" filterBy="#{item.nombre}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Nombre"/>
                                        </f:facet>
                                        <h:outputText style="text-transform: capitalize" value="#{item.nombre}"/>
                                    </p:column>

                                    <p:column width="2%" filterBy="#{item.costo}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Costo"/>
                                        </f:facet>
                                        <h:outputText style="text-transform: capitalize" value="#{item.costo}"/>
                                    </p:column>

                                    <p:column width="2%" filterBy="#{item.idCategoria.descripcion}" filterStyle="height:20px;font-size:12px;">
                                        <f:facet name="header">
                                            <h:outputText value="Categoría"/>
                                        </f:facet>

                                        <h:outputText value="#{item.idCategoria.descripcion}"/>
                                    </p:column>

                                    <p:column width="2%"  sortBy="#{item.idEstado.descripcion}">
                                        <f:facet name="header">
                                            <h:outputText value="Estado"/>
                                        </f:facet>

                                        <h:outputText style="text-transform: capitalize" value="#{item.idEstado.descripcion}"/>
                                    </p:column>

                                    <p:column width="2%"  sortBy="#{item.precioFinal}">
                                        <f:facet name="header">
                                            <h:outputText value="Precio"/>
                                        </f:facet>

                                        <h:outputText style="text-transform: capitalize" value="#{item.precioFinal}"/>
                                    </p:column>


                                    <p:column width="6%">
                                        <f:facet name="header">
                                            <h:outputText value="Descripción"/>
                                        </f:facet>

                                        <h:outputText style="text-transform: capitalize" value="#{item.descripcion}"/>
                                    </p:column>         


                                </p:dataTable>
                            </div>

                        </div>

                    </div>

                </h:form>    
                <ui:include src="View.xhtml"/>
                <ui:include src="Edit.xhtml"/>
            </ui:define>

        </ui:composition>

    </body>
</html>

